@import "~terriajs-variables";

.input {
  composes: field from "../../../Sass/common/_form.scss";
}

.large {
  height: $input-height-large;
}

.light {
  background: $grey-lighter2;
  border-color: transparent; // use transparent instead of no-border for layout +/ high contrast
  &,
  &:read-only:not(select) {
    background: $grey-lighter2;
  }
  &:focus {
    border-color: transparent;
  }
  color: $text-dark2;
  /* WebKit/Blink Browsers */
  &::selection,
  /* Gecko Browsers */
  &::-moz-selection {
    background: $color-primary;
    color: $text-light;
  }
}

.dark {
  background: $overlay;
  &,
  &:read-only:not(select) {
    background: $overlay;
  }
  color: $text-light;
  /* WebKit/Blink Browsers */
  &::selection,
  /* Gecko Browsers */
  &::-moz-selection {
    background: $grey-lighter2;
    color: $color-primary;
  }
}
